<template>
  <div class="financialmanagementorderlist-wrapper">
        <BaseFilter class="base-filter" :config="filterOptions" @mychange="(value) => setFilterData('base', value)" />
        <BaseFilter class="type-filter" :config="typeOptions" @mychange="(value) => setFilterData('type', value)" />
      <div class="table-wrapper">
          <BaseTable :columns="tableColumns" :tableData="getTableData()">
                <template #header>
                    <div class="header-btn">
                        <el-button type="primary" @click="exportXLSXFile()">导出excel</el-button>
                        <el-button type="primary">查询</el-button>
                        <el-button type="primary">重置</el-button>
                    </div>
                </template>
            </BaseTable>
      </div>
  </div>
</template>

<script>
import BaseFilter from "@/components/BaseFilter.vue";
import BaseTable from "@/components/BaseTable.vue";
import { getOrders } from "@/api/wallent";
import moment from "moment";
import XLSX from "xlsx";
export default {
    name: "bigcustomerorderlist",
    components: {
        BaseFilter,
        BaseTable
    },
    data(){
        return {
            date: null,
            filterOptions: [
                {
                    label: "姓名",
                    key: "name",
                    type: "text",
                    props: {
                        placeholder: "姓名"
                    },
                },
                {
                    label: "单位",
                    key: "company",
                    type: "text",
                    props: {
                        placeholder: "姓名"
                    },
                },
                {
                    label: "订单日期",
                    key: "create_time",
                    type: "datepicker",
                    props: {
                        type: "daterange",
                        rangeSeparator: "-",
                        startPlaceholder: "开始日期",
                        endPlaceholder: "结束日期"
                    },
                }
            ],
            typeOptions: [
                {
                    label: "类型",
                    key: "type",
                    type: "radio",
                    options: [
                        {
                            label: "全部",
                            value: false
                        },
                        {
                            label: "合伙人",
                            value: "合伙人"
                        },
                        {
                            label: "大客户",
                            value: "大客户"
                        },
                    ]
                },
                {
                    label: "类型",
                    key: "card_type",
                    type: "radio",
                    options: [
                        {
                            label: "全部",
                            value: false
                        },
                        {
                            label: "虚拟卡",
                            value: "虚拟卡"
                        },
                        {
                            label: "实体卡",
                            value: "实体卡"
                        },
                    ]
                },
            ],
            filterData: {},
            tableColumns: [
                {
                    title: "订单编号",
                    key: "order_number",
                },
                {
                    title: "订单数量",
                    key: "order_quantity",
                },
                {
                    title: "姓名",
                    key: "name",
                },
                {
                    title: "单位",
                    key: "company",
                },
                {
                    title: "创建时间",
                    key: "create_time",
                },
                {
                    title: "产品名称",
                    key: "product_name",
                },
                {
                    title: "支付方式",
                    key: "pay_method",
                },
                {
                    title: "支付时间",
                    key: "pay_date",
                },
                {
                    title: "支付状态",
                    key: "pay_status",
                },
                {
                    title: "卡类型",
                    key: "card_type",
                },
                {
                    title: "类型",
                    key: "type",
                }
            ],
            tableData: [],
            allData: [{
                label: "总金额",
                key: "allcount",
                value: 0
            }, {
                label: "总销售额",
                key: "allcash",
                value: 0
            }, {
                label: "总管理津贴",
                key: "allmanaBounus",
                value: 0
            }, {
                label: "总提现金额",
                key: "allsoldBounus",
                value: 0
            }],
        }
    },
    methods: {
        setFilterData(key, values){
            this.filterData = {
                ...this.filterData,
                [key]: values
            }
        },  
        getOrders(){
            getOrders().then(res => {
                if(res.code === 200){
                    this.tableData = (res.res || []).map(item => {
                        return {
                            ...item,
                            create_time: item.create_time ? moment(item?.create_time).format("YYYY-MM-DD HH:mm:ss") : moment().format("YYYY-MM-DD HH:mm:ss"),
                            pay_date: item.pay_date ? moment(item?.pay_date).format("YYYY-MM-DD HH:mm:ss") : moment().format("YYYY-MM-DD HH:mm:ss"),
                            pay_status: item.pay_status === 1 ? "已支付" : "未支付",
                        }
                    })
                }
                this.$message.error("加载数据失败");
                return;
            }).catch(err => {
                this.$message.error("加载数据失败");
            })
        },
        getTableData(){
            const { base, type } = this.filterData;
            let data = this.tableData;
            let keys = [];
            if(base){
                keys = Object.keys(base);
                for(let idx = 0; idx < keys.length; idx++){
                    let key = keys[idx];
                    if(!base?.[key] || key === "create_time") continue;
                    data = data.filter(item => item?.[key].includes(base[key]));
                    
                }
            }
            if(type){
                keys = Object.keys(type);
                for(let idx = 0; idx < keys.length; idx++){
                    let key = keys[idx];
                    if(!type?.[key]) continue;
                    data = data.filter(item => item?.[key].includes(type?.[key]));
                }
            }
            console.log(data)
            return data;
        },
        exportXLSXFile() {
            if(this.tableData.length == 0) {
                this.$message.warn("当前数据列表为空");
                return
            }
            const head = this.tableColumns.map(item => {
                return item.title;
            })
            const data = this.tableData.map(item => {
                return this.tableColumns.map(fi => {
                    return item?.[fi.key];
                })
            })
            const ws_name = "Sheet1";
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.aoa_to_sheet([head, ...data]);
            XLSX.utils.book_append_sheet(wb, ws, ws_name);
            XLSX.writeFile(wb, "钱包数据.xlsx");
        },
        setDialogFilter(values){
            this.dialogFilter = values;
        },
    },
    mounted(){
        this.getOrders();
    }
}
</script>

<style lang="scss">
.financialmanagementorderlist-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
    .table-wrapper {
        margin-top: 20px;
    }
    .data-list {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        .data-item {
            flex: 1;
            margin-right: 20px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .type-filter {
        margin-top: 20px;
    }
}
.dialog-table {
    margin-top: 20px;
}
</style>